<template>
  <div class="page-content">
    <!-- 表格顶部区域 -->
    <TableBar
      :columns="columns"
      @changeColumn="
        (newcolumns) => {
          this.columns = newcolumns;
        }
      "
      :layout="layout"
    >
      <div slot="bottom">
        <el-row :gutter="real ? 0 : 20">
          <el-col :span="5">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="showUploadFile = true"
              >上传文件</el-button
            >
          </el-col>
          <el-col :span="5">
            <el-button
              type="danger"
              plain
              size="mini"
              @click="delByBatch"
              :disabled="selectRows.length === 0"
              >批量删除</el-button
            >
          </el-col>
          <el-col :span="5" v-if="this.real">
            <el-button
              type="warning"
              plain
              size="mini"
              @click="recoverByBatch"
              :disabled="selectRows.length === 0"
              >批量恢复</el-button
            >
          </el-col>
          <el-col :span="real ? 9 : 10">
            <el-select v-model="type" placeholder="请选择类型" size="mini">
              <el-option
                v-for="item in [
                  {
                    value: 'self',
                    label: '个人上传文件记录',
                  },
                  {
                    value: '',
                    label: '所有上传文件记录',
                  },
                  {
                    value: 'self/deleted',
                    label: '个人删除文件记录',
                  },
                  {
                    value: 'deleted',
                    label: '所有删除文件记录',
                  },
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
      <div slot="top">
        <el-form label-width="55px">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="名称：">
                <el-input placeholder="名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="地址：">
                <el-input placeholder="地址"></el-input>
              </el-form-item>
            </el-col>

            <el-row
              :xs="24"
              :sm="12"
              :lg="6"
              style="float: right; margin-right: 10px"
            >
              <el-button type="primary">搜索</el-button>
              <el-button>重置</el-button>
            </el-row>
          </el-row>
        </el-form>
      </div>
    </TableBar>
    <!-- 表格区域 -->
    <TheTable
      :data="allList"
      :page.sync="page"
      :showPage="showPage"
      @changeSize="
        (size) => {
          this.page.pageSize = size.pageSize;
          this.setAllList();
        }
      "
      @changePage="
        (page) => {
          this.page.current = page.current;
          this.setAllList();
        }
      "
      @selectData="
        (selectRows) => {
          this.selectRows = selectRows;
        }
      "
      :Bottom="35"
    >
      <div class="item" effect="dark" placement="top-start">
        <el-table-column
          type="selection"
          width="35"
          fixed="left"
        ></el-table-column>
      </div>
      <!-- 文件重命名 -->
      <div class="item" effect="dark" placement="top-start">
        <el-table-column label="名称" v-if="columns[1].show"
          ><template slot-scope="scope">
            <span
              v-if="showEditFileNameInput != scope.row.id"
              @click="showEditFileNameInput = scope.row.id"
              >{{ scope.row.name }}</span
            >
            <el-input
              v-else
              v-model="scope.row.name"
              @blur="updateFileName(scope.row)"
            ></el-input>
          </template>
        </el-table-column>
      </div>
      <div
        v-for="item in showColumns"
        :key="item.id"
        class="item"
        effect="dark"
        placement="top-start"
      >
        <el-table-column
          v-if="item.show"
          :label="item.name"
          :prop="item.prop"
          show-overflow-tooltip
        ></el-table-column>
      </div>
      <!-- 文件预览 -->
      <div class="item" effect="dark" placement="top-start">
        <el-table-column label="文件预览" v-if="columns[5].show"
          ><template slot-scope="scope">
            <FileIcon
              :fileUrl="scope.row.url"
              :fileType="scope.row.extension"
              :cb="fileIconCallBack"
            ></FileIcon>
          </template>
        </el-table-column>
      </div>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            mini
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="delInfo(scope.row.id)"
          ></el-button>
          <el-button
            v-if="real"
            mini
            type="warning"
            icon="el-icon-refresh-left"
            size="mini"
            @click="recoverInfo(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </TheTable>
    <UploadFile
      :is-open="showUploadFile"
      :types="['*/*']"
      :upload-success="uploadSuccess"
      :close-modal="() => (this.showUploadFile = false)"
    ></UploadFile>
    <ShowFile
      :dialogVisible="showShowFile"
      :close="() => (this.showShowFile = false)"
      :fileType="curFileType"
      :fileUrl="curFileUrl"
    ></ShowFile>
  </div>
</template>

<script>
// 文件图标+预览
const FileIcon = {
  props: {
    fileType: {
      type: String,
    },
    fileUrl: {
      type: String,
    },
    cb: {
      type: Function,
    },
  },
  render(h) {
    let iconUrl = "";
    if (/image/.test(this.fileType)) {
      iconUrl = "el-icon-picture-outline";
    } else if (/video/.test(this.fileType)) {
      iconUrl = "el-icon-video-camera";
    } else if (/application/.test(this.fileType)) {
      if (/word|rtf|wordprocessingml/.test(this.fileType)) {
        iconUrl = "iconfont icon-Word";
      } else if (/pdf/.test(this.fileType)) {
        iconUrl = "iconfont icon-pdf";
      } else if (/powerpoint|octet-stream|presentation/.test(this.fileType)) {
        iconUrl = "iconfont icon-PPT";
      } else if (/excel|spreadsheetml/.test(this.fileType)) {
        iconUrl = "iconfont icon-excel";
      }
    } else if (/text/.test(this.fileType)) {
      iconUrl = "iconfont icon-uploadicon01";
    } else {
      iconUrl = "el-icon-document";
    }
    let index = this.fileType.indexOf("/");
    let showFile_fileType = this.fileType.slice(0, index);
    // console.log('showFile_fileType: ', showFile_fileType);
    return (
      <div>
        <span
          class={iconUrl}
          style={{ fontSize: "24px", cursor: "pointer" }}
          onClick={() => {
            this.cb(this.fileUrl, showFile_fileType);
          }}
        ></span>
      </div>
    );
  },
};
import "../../assets/icon/iconfont.css";
import {
  getAllInfoByPage,
  addInfo,
  delInfoById,
  delInfoByIds,
  recoverInfoById,
  recoverInfoByIds,
  renameInfoById,
} from "../../Api/rightsmanage/base_file_mange";
import UploadFile from "../../components/RightsManagement/BaseFileMange/UploadFile";
import ShowFile from "../../components/RightsManagement/BaseFileMange/ShowFile";
import TableBar from "../../components/RightsManagement/BaseFileMange/TableBar";
export default {
  name: "BaseFileMange",
  components: {
    UploadFile,
    FileIcon,
    ShowFile,TableBar
  },
  data() {
    return {
      allList: [],
      columns: [
        // 表头数据
        { name: "id", show: false, prop: "id" },
        { name: "名称", show: true, prop: "name" },
        { name: "类型", show: true, prop: "type" },
        { name: "大小(size)", show: false, prop: "size" },
        { name: "上传者", show: true, prop: "uploader" },
        { name: "文件预览", show: true, prop: "url" },
        { name: "创建时间", show: false, prop: "gmtCreate" },
        { name: "修改时间", show: false, prop: "gmtModified" },
      ],
      layout: "search, refresh, column",
      form: {},
      rules: {
        id: [
          {
            required: true,
            message: `请输入工艺描述`,
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: `请输入工艺描述`,
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: `请输入工艺描述`,
            trigger: "blur",
          },
        ],
        size: [
          {
            required: true,
            message: `请输入工艺描述`,
            trigger: "blur",
          },
        ],
        uploader: [
          {
            required: true,
            message: `请输入工艺描述`,
            trigger: "blur",
          },
        ],
        url: [
          {
            required: true,
            message: `请输入工艺描述`,
            trigger: "blur",
          },
        ],
        gmtCreate: [
          {
            required: true,
            message: `请输入工艺描述`,
            trigger: "blur",
          },
        ],
        gmtModified: [
          {
            required: true,
            message: `请输入工艺描述`,
            trigger: "blur",
          },
        ],
      },
      showPage: true, // 显示分页
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      type: "", //deleted(总删除记录) or self/deleted（自己的删除记录) or self(自己上传的) or null(所有上传的,默认)
      showUploadFile: false,
      selectRows: [], //多选 选中的行
      showEditFileNameInput: null, //编辑文件名称

      // 预览文件组件控制
      showShowFile: false,
      curFileType: "", //当前点击图标的文件类型
      curFileUrl: "", //当前点击图标的文件url
    };
  },
  computed: {
    // (用于展示)
    showColumns() {
      // 额外处理
      const noArr = ["url", "name"];
      return this.columns.filter((item) => {
        return !noArr.includes(item.prop);
      });
    },
    // 批量删除的ID集合
    ids() {
      console.log("this.selectRows: ", this.selectRows);
      return this.selectRows.map((row) => row.id);
    },
    // 是否是真正删除
    real() {
      return this.type.indexOf("deleted") >= 0;
    },
  },
  watch: {
    // 类型变化的时候
    type: {
      handler(type) {
        this.setAllList();
      },
      immediate: true,
    },
  },
  methods: {
    // 获取数据
    async setAllList() {
      const { data: res } = await getAllInfoByPage(
        this.page.current,
        this.page.pageSize,
        this.type
      );
      if (res.statusCode !== 20000) {
        console.error(res.message);
      }
      this.allList = res.data.records;
      this.page.total = res.data.total;
    },
    // 上传文件
    async uploadSuccess(url, files) {
      // console.log("files: ", files);
      console.log("url: ", url);
      const { name, size, type } = files[0];
      const { data: res } = await addInfo({
        url,
        name,
        size,
        extension: type,
      });
      if (res.statusCode !== 20000) {
        console.error(res.message);
        this.$message.error(res.message);
      } else {
        this.$message.success(res.message);
        this.setAllList();
      }
    },

    // 单行删除按钮
    async delInfo(id) {
      if (this.real) {
        this.$confirm("此操作将永久删除该信息，请谨慎操作, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const { data: res } = await delInfoById(id, this.real);
            if (res.statusCode !== 20000) {
              this.$message.error(res.message);
            } else {
              this.$message.success(res.message);
              this.setAllList();
            }
          })
          .catch(() => {
            return this.$message.info("已取消删除！");
          });
      } else {
        const { data: res } = await delInfoById(id, this.real);
        if (res.statusCode !== 20000) {
          this.$message.error(res.message);
        } else {
          this.$message.success(res.message);
          this.setAllList();
        }
      }
    },

    // 批量删除按钮
    async delByBatch() {
      console.log(this.ids);
      // return;
      if (this.real) {
        this.$confirm(
          "此操作将永久删除这些信息，请谨慎操作, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(async () => {
            const { data: res } = await delInfoByIds(this.ids, this.real);
            if (res.statusCode !== 20000) {
              this.$message.error(res.message);
            } else {
              this.$message.success(res.message);
              this.setAllList();
            }
          })
          .catch(() => {
            return this.$message.info("已取消删除！");
          });
      } else {
        const { data: res } = await delInfoByIds(this.ids, this.real);
        if (res.statusCode !== 20000) {
          this.$message.error(res.message);
        } else {
          this.$message.success(res.message);
          this.setAllList();
        }
      }
    },

    // 单行恢复按钮
    async recoverInfo(id) {
      const { data: res } = await recoverInfoById(id);
      if (res.statusCode !== 20000) {
        this.$message.error(res.message);
      } else {
        this.$message.success(res.message);
        this.setAllList();
      }
    },

    // 批量恢复按钮
    async recoverByBatch() {
      const { data: res } = await recoverInfoByIds(this.ids);
      if (res.statusCode !== 20000) {
        this.$message.error(res.message);
      } else {
        this.$message.success(res.message);
        this.setAllList();
      }
    },

    // 编辑文件名字后，失去焦点触发
    async updateFileName(row) {
      console.log("row: ", row.name);
      if (row.name == "") {
        this.$message.warning("名称不能为空");
        return;
      }
      // 发请求----
      const { data: res } = await renameInfoById(row.id, row.name);
      if (res.statusCode !== 20000) {
        console.error(res.message);
        this.$message.error(res.message);
      } else {
        this.$message.success(res.message);
      }
      this.showEditFileNameInput = null;
    },
    // 点击文件图标回调函数
    fileIconCallBack(curFileUrl, curFileType) {
      this.curFileType = curFileType;
      this.curFileUrl = curFileUrl;
      this.showShowFile = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form .el-form-item .el-input {
  width: 300px;
}
</style>